<template>
  <div style="width: 100%">
    <div align="center" ref="chartRef4" style="width: 1610px; height: 400px;"></div>
  </div>
</template>

<script setup name="chart4">
import {onMounted, ref,markRaw} from "vue";
import data from "@/assets/home/Sample.json"
import * as echarts from 'echarts';

const chartRef4 = ref();
const chartInstance4= ref();

// 按 Tissue 分类并统计 Health_status 的个数
const tissueSampleTypeCounts = data.reduce((acc, item) => {
  if (!acc[item.Tissue]) {
    acc[item.Tissue] = {};
  }
  acc[item.Tissue][item.Health_status] = (acc[item.Tissue][item.Health_status] || 0) + 1;
  return acc;
}, {});

// const tissueSampleTypes = Object.keys(tissueSampleTypeCounts).map(tissue => {
//   return Object.keys(tissueSampleTypeCounts[tissue]).map(sampleType => {
//     // 找到与当前 sampleType 对应的 Geo_accession
//     const geoAccession = data.find(item =>
//         item.Sample_type === sampleType && item.Tissue === tissue
//     ).Geo_accession;
//
//     return {
//       value: tissueSampleTypeCounts[tissue][sampleType],
//       name: sampleType,
//       tissue: tissue,
//       Geo_accession: geoAccession // 添加 Geo_accession 字段
//     };
//   });
// }).flat();

// 提取所有不同的 tissue 类型
const tissues = Object.keys(tissueSampleTypeCounts);

// 提取数据
const cancerData = tissues.map(category => tissueSampleTypeCounts[category].Cancer || 0);
const normalData = tissues.map(category => tissueSampleTypeCounts[category].Normal || 0);

const colorPalette = {};
const randomIntFromInterval = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) + min);
};

tissues.forEach(tissue => {
  // 随机生成 RGB 值，确保颜色之间有差异
  let r = randomIntFromInterval(0, 255); // 红色分量
  let g = randomIntFromInterval(0, 255); // 绿色分量
  let b = randomIntFromInterval(0, 255); // 蓝色分量

  // 确保至少有一个颜色分量与其他颜色有明显差异
  while (Math.abs(r - 128) < 30 && Math.abs(g - 128) < 30 && Math.abs(b - 128) < 30) {
    r = randomIntFromInterval(0, 255);
    g = randomIntFromInterval(0, 255);
    b = randomIntFromInterval(0, 255);
  }

  colorPalette[tissue] = `rgb(${r}, ${g}, ${b})`; // 分配 RGB 颜色
});

onMounted(()=>{
  console.log("tissue",tissues)
  console.log("colorPalette",colorPalette)
  console.log("tissueSampleTypeCounts",tissueSampleTypeCounts);
  chartInstance4.value = markRaw(echarts.init(chartRef4.value));
  const option = {
    title: {
      subtext: 'Number of samples',
      left: '5%',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
    },
    legend: {},
    grid: {
      left: '5%',
      right: '5%',
      bottom: '3px',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: tissues,
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    series: [
      {
        name: 'Cancer',
        type: 'bar',
        data: cancerData
      },
      {
        name: 'Normal',
        type: 'bar',
        data: normalData
      }
    ]
  };
  chartInstance4.value.setOption(option);
});
</script>

<style scoped>

</style>
